<template>
	<view class="container">
		<view class="flex-between" @click="open">
			<view class="title text-over">{{list[curIndex].label}}</view>
			<text class="iconfont icon" :class="{down: show}">&#xe618;</text>
		</view>
		<van-popup :round="true" :show="show" position="bottom" custom-style="background: #FAFAFA; border: none; max-height: 40%; overflow: auto; z-index:99999"
		 close-on-click-overlay :overlay="true" @close="close">
			<view class="li-title item">请选择</view>
			<view class="item" v-for="(item, index) in list" :key="index" @click="pick(item, index)" :class="[curIndex == index ? 'check' : '']">
				{{item.label}}
			</view>
			<view class="item cancle" @click="close">取消</view>
		</van-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: 'time'
			}
		},
		data() {
			return {
				curIndex: 0,
				list: [],
				time: [{
						label: '付款时间',
						value: 1,
						order: 'tkPaidTime'
					},
					{
						label: '创建时间',
						value: 0,
						order: 'tkCreateTime'
					},
					{
						label: '结算时间',
						value: 2,
						order: 'tkEarningTime'
					}
				],
				order: [{
						label: '订单状态',
						value: ''
					},
					{
						label: '订单结算',
						value: 3
					},
					{
						label: '订单付款',
						value: 12
					},
					{
						label: '订单失效',
						value: 13
					}
				],
				cusOrder: [{
						label: '全部订单',
						value: '',
					},
					{
						label: '有效订单',
						value: 1,
					},
					{
						label: '无效订单',
						value: 0,
					}
				],
				taobao: [{
					label: '阿里妈妈',
					id: ''
				}],
				date: [{
						label: '今天',
						value: 0
					},
					{
						label: '昨天',
						value: 1
					},
					{
						label: '最近七天',
						value: 2
					},
					{
						label: '最近三十天',
						value: 3
					},
					{
						label: '本月',
						value: 4
					}
				],
				tag: [{
						label: '推广位标签',
						value: 0
					},
					{
						label: '员工标签',
						value: 1
					},
					{
						label: '渠道标签',
						value: 2
					}
				],
				line: [{
						label: '订单',
						value: 0
					},
					{
						label: '佣金',
						value: 1
					}
				]

			}
		},
		created() {
			this.getTaobao()
		},
		methods: {
			change() {
				this.curIndex = 0
			},
			close() {
				// this.$emit('close', this.type)
				this.$emit('filter', {}, 'shade')
			},
			pick(item, index) {
				this.curIndex = index
				this.$emit('filter', item, this.type)
				// this.close()
			},
			open() {
				this.$emit('open', true)
			},
			// 获取所有阿里妈妈
			getTaobao() {
				console.log('hasLogin', this.hasLogin)
				if (this.type !== 'taobao' || !this.hasLogin) return
				setTimeout(() => {
					this.$service.common.taobao().then((res) => {
						res.forEach((item, index) => {
							let obj = {}
							obj.id = item.id
							obj.label = item.account
							this.taobao.push(obj)
						})
					}).catch((err) => {})
				}, 1000)
			}
		},
		computed: {
			...mapState(['hasLogin']),
			ckType() {
				switch (this.type) {
					case 'time':
						this.list = this.time
						break;
					case 'order':
						this.list = this.order
						break;
					case 'taobao':
						this.list = this.taobao
						break;
					case 'tag':
						this.list = this.tag
						break;
					case 'date':
						this.list = this.date
						break;
					case 'cusOrder':
						this.list = this.cusOrder
						break;
					case 'line':
						this.list = this.line
						break;
				}
				return this.type
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: white;
		border-bottom: 2rpx solid #F2F2F2;
		font-size: 28rpx;
	}

	.check {
		color: $main-color;
	}

	.icon {
		transition: all 0.5s;
	}

	.down {
		transform: rotate(180deg);
	}

	.container {
		.li-title {
			margin-bottom: 12rpx;
			border: none;
		}
	}

	.title {
		// min-width: 3rem;
		max-width: 3.8rem;
	}

	.cancle {
		margin-top: 12rpx;
		border: none;
	}

	/deep/ .van-popup {
		background: #FAFAFA;

		.van-overlay {
			z-index: 9999;
		}
	}
</style>
